<template>
	<view class="mypop">
		<u-popup :show="showPop" mode="bottom" height="300px" customStyle="width:100%" :round="10">
			<view class="p-3">
				<view class="" style='position: absolute;right: 40rpx;z-index: 10;'>
					<u-icon name="close" size="20" @click="refuse"></u-icon>
				</view>
				<view class="title" style="text-align: center;color: #081738;font-weight: 500;">
					{{title}}
				</view>
				<scroll-view scroll-y="false" style="height: 300px;" @scrolltolower="lower">
					<view class="scroll-content">
						<view class="center">
							<view class="title">
								全部商品
							</view>
							<view class="list" v-for="(item,index) in list" :key="index" v-if="showList">
								<view class="item" v-if="item.price>0">
									<!-- <view class="top">
										<view class="name">
											{{item.name}}
										</view>
										<view class="price">
											¥{{item.price}}.00
										</view>
									</view>
									<view class="bot">
										{{item.illustrate}}
									</view> -->
									<!-- <view class="check" @click="checkedType(index)">
										<radio value="item.value" :checked="item.checked" />
									</view> -->
									<view class="left">
										<view class="cardName">
											{{item.name}}
										</view>
										<view class="cardInfo">
											<view class="info-item">
												有效期：{{item.start_time.substring(0,10)}} 至
												{{item.end_time.substring(0,10)}}
											</view>
											<view class="info-item">
												<view class="items" v-for="(i,index) in item.log" :key="index">
													<text>
														{{i.card_type_name}}: {{i.number}}次
													</text>
													<text>
														剩余: {{i.residue}}次
													</text>
												</view>
											</view>
										</view>
										<view class="info-item" style="font-size: 24rpx;margin-top: 10px;">
											{{item.illustrate}}
										</view>
									</view>
									<view class="right">
										<view class="cardPrice">
											¥{{item.price}}
										</view>
										<view class="useCard" @click="useMyCard(item)">
											<!-- {{isTrila == 1?'开启机器':'去使用'}} -->
											去使用
										</view>
									</view>
								</view>
							</view>
							<view class="noCards" v-if="!showList">
								<image src="../../static/icon/my/noCards.png" mode="widthFix"></image>
								<view class="">
									没有数据
								</view>
							</view>
						</view>
					</view>
				</scroll-view>
				<view class="jc-sb" style="align-items: center;" v-if="false">
					<view style="width: 30%;margin-right: 20rpx;color: #3BA199;font-weight: 600;font-size: 40rpx;">
						¥{{price}}
					</view>
					<view style="width: 35%;" @click="submit">
						<u-button class="custom-style" text="立即使用" color="#fff"
							customStyle="background: linear-gradient(90deg, #2CB9A4 0%, #2CB9A4 100%);color:#fff;border-radius: 20px;">
						</u-button>
					</view>
				</view>
				<view class="jc-sb" style="align-items: center;" v-if="!showList">
					<view style="width: 30%;margin-right: 20rpx;color: #3BA199;font-weight: 600;font-size: 40rpx;">

					</view>
					<view style="width: 35%;" @click="buyCard">
						<u-button class="custom-style" text="前往购买" color="#fff"
							customStyle="background: linear-gradient(90deg, #2CB9A4 0%, #2CB9A4 100%);color:#fff;border-radius: 20px;">
						</u-button>
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>


<script>
	import {
		usableCoupons
	} from '@/request/api.js'
	export default {
		props: ['showPop', 'title', 'tip', 'listData', 'cardId','isTrila'],
		data() {
			return {
				showList: false,
				form: {
					page: 1,
					id: '',
				},
				last_page: 1,
				show: false,
				value: '',
				list: [],
				price: 0
			}
		},
		watch: {
			listData: {
				handler(newVal) {
					let newData = JSON.parse(JSON.stringify(newVal))  
					console.log(newVal,'新的值')
					if(this.isTrila == 1){//飞狗店铺的时候
						newData.forEach(item=>{
							 item['log'] = item.log.slice(0,1)
						})
					}
					this.list = newData
					this.showList = this.list.length == 0 ? false : true;
				},
				deep: true
			},
			cardId: {
				handler(newVal) {
					console.log(newVal, '新的id值')
					this.form.id = newVal
				},
				// deep:true,
				// immediate:true
			}
		},
		methods: {
			useMyCard(data) {
				this.$emit('submit', data)
			},
			buyCard() {
				uni.navigateTo({
					url: '/pages/index/moreProducts?id=' + this.form.id
				})
			},
			lower: function(e) {
				console.log('到达底部吧')
				this.$emit('upDateList')
				// if (this.form.page < this.last_page) {
				// 	this.form.page = this.form.page + 1
				// }
			},
			pay() {
				// uni.navigateTo({
				// 	url:'/components/index/paySuccess?title=支付成功'
				// })
			},
			checkedType(i) {
				this.list.forEach((item, index) => {
					if (index != i) {
						item['checked'] = false
					} else {
						item['checked'] = !item['checked']
						this.price = item.price
					}
				})
				// this.listData[i].checked = !this.listData[i].checked
				this.$emit('upDateCheck', this.list)
				// this.$forceUpdate()
				console.log(this.list, '勾选的列表1')
			},
			// 注意返回值为一个数组，单列时取数组的第一个元素即可(只有一个元素)
			submit() {
				let data = null
				// console.log(this.listData,'勾选的列表2')
				let btn = false
				this.listData.forEach(item => {
					if (item['checked'] == true) {
						data = item
						btn = true
					}
				})
				if (!btn) {
					uni.showToast({
						icon: 'none',
						title: '请勾选需要的卡卷'
					})
					return false;
				}
				this.$emit('submit', data)
				this.value = ''
			},
			refuse() {
				this.$emit('refuse', true)
			},

		}
	}
</script>

<style scoped lang="scss">
	::v-deep .u-icon {
		display: inline !important;
	}

	.mypop {
		width: 90%;
	}

	.scroll-content {
		display: flex;
		flex-direction: column;

		.top {
			display: flex;
			justify-content: space-between;
			margin-top: 40rpx;
			border-bottom: 0.5rpx solid rgba(217, 217, 217, 0.6);
			padding-bottom: 40rpx;

			.item {
				text-align: center;
				background: #F6F6F6;
				padding: 20rpx 40rpx;
				border-radius: 8px;

				.top1 {
					color: #081738;
					font-size: 34rpx;
				}

				.top2 {
					color: #979797;
					font-size: 28rpx;
				}
			}
		}

		.center {
			padding-bottom: 40rpx;
			padding-top: 20rpx;

			.title {}

			.noCards {
				color: #979797;
				margin-top: 50rpx;
				text-align: center;

				image {
					width: 50%;
				}
			}

			.list {
				// display: flex;
				// justify-content: space-between;
				// align-items: center;
				// .item {
				// 	display: flex;
				// 	flex-direction: column;
				// 	flex: 1;
				// 	margin-top: 20rpx;
				// 	margin-right: 20rpx;
				// 	padding: 15rpx 20rpx; 
				// 	color: #2CB9A4;
				// 	background: #C0EAE4;
				// 	border-radius: 10px;
				// 	.top{
				// 		display: flex;
				// 		justify-content: space-between;
				// 		width: 78%;
				// 		margin-top: 0;
				// 		padding: 10rpx;
				// 		border: 0;
				// 	}
				// 	.bot{
				// 		font-size: 26rpx;
				// 		padding: 0 10rpx;
				// 	}
				// }

				.item {
					display: flex;
					margin-top: 20rpx;
					// justify-content: space-between;
					// align-items: center;
					background: linear-gradient(270deg, #2CB9A4 0%, #8EDCD0 100.05%);
					border-radius: 10px;
					padding: 20rpx 20rpx;
					color: #fff;
					font-size: 28rpx;

					.left {
						flex: 1;

						.cardName {}

						.cardInfo {
							font-size: 24rpx;

							.info-item {
								margin-top: 6rpx;
							}

							.info-item {
								.items {
									margin-top: 6rpx;
									display: flex;
									justify-content: space-between;

									text:first-child {
										flex: 1;
									}

									text:last-child {
										width: 122rpx;
										text-align: right;
										margin-left: 15rpx;
										font-weight: 600;
										font-size: 25rpx;
									}

								}
							}
						}
					}

					.right {
						width: 160rpx;
						display: flex;
						flex-direction: column;
						justify-content: center;
						// align-items: center;
						align-items: flex-end;

						.cardPrice {
							font-weight: 600;
						}

						.useCard {
							color: #2CB9A4;
							background: #fff;
							border-radius: 20px;
							padding: 5rpx 20rpx;
							margin-top: 20rpx
						}
					}
				}
			}
		}

		.bottom {}
	}
</style>